<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="./../template/template.xhtml">
	<ui:define name="menu"></ui:define>
	<ui:define name="content">
		<h:form>
			<table border="0" width="100%">
				<tr>
					<td valign="top">
						<h:panelGrid width="100%">
							<h:inputHidden id="id"
								value="#{employeeController.employeeDTO.id}" /> 
								
							<p:outputLabel value="Name: " for="name" /> 
							<h:inputText id="name"
									value="#{receptionController.tokenDetailsDTO.name}"
									required="true" requiredMessage="Field cannot be empty!"
									validatorMessage="Allowed value length is Min: 3 and Max 20.">
								<f:validateLength for="name" minimum="2" maximum="20" />
							</h:inputText> 
							
							<p:outputLabel value="Mobile: " for="mobile" /> 
							<h:inputText id="mobile"
								value="#{receptionController.tokenDetailsDTO.mobileNo}"
								required="true">
							</h:inputText> 
							
							<p:outputLabel value="Destination: " for="destination" /> 
							<h:selectOneMenu id="destination"
								value="#{receptionController.tokenDetailsDTO.destinationId}">
								<f:selectItems value="#{receptionController.destinationList}"
									var="destination" itemLabel="#{destination.name}"
									itemValue="#{destination.id}" />
							</h:selectOneMenu> 
							
							<h:outputText value="" /> 
							<p:commandButton value="Save"
								action="#{receptionController.save}" ajax="true" />
						</h:panelGrid>
					</td>
					<td valign="top">
						<h:panelGrid width="100%">
							<h:dataTable
								value="#{receptionController.tokenList}" var="token"
								styleClass="TABLE_BASIC_COMPOSITION" headerClass="TABLE_HEADER"
								rowClasses="ODD_ROW, EVEN_ROW" cellpadding="8" width="100%">
								<h:column>
									<f:facet name="header">Token No.</f:facet>
									<h:outputText value="#{token.tokenNo}" />
								</h:column>
								<h:column>
									<f:facet name="header">Name</f:facet>
									<h:outputText value="#{token.name}" />
								</h:column>
								<h:column>
									<f:facet name="header">Mobile No.</f:facet>
									<h:outputText value="#{token.mobileNo}" />
								</h:column>
								<h:column>
									<f:facet name="header">Status</f:facet>
									<h:outputText value="#{token.tokenStatu}" />
								</h:column>
							</h:dataTable>
						</h:panelGrid>
					</td>
				</tr>
			</table>
		</h:form>
	</ui:define>
</ui:composition>
</html>